<template>
  <div class="current-info">
    <div class="item">
      <div class="context" v-for="(v, k) in map" :key='k'>
        <div class="label">{{v}}</div>
        <div class="value">{{ info[k] || 'N/A' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { newestAnalysisTrainData } from '@/api/statistics'
const trainTypes = {
  H: '货车',
  P: '客车',
  X: '单车'
}
export default {
  name: 'CurrentTrain',
  data() {
    return {
      timer: null,
      map: {
        trainId: "机车号",
        trainNumber: "车次号",
        trainTypeTrans: "车辆类型",
        trainLength: "车辆长度",
        // startTime: "启机时间",
        // endTime: "关机时间",
        uploadUserName: "上传人员",
        uploadTime: "上传时间",
        uploadIp: "上传IP"
        // uploadUserId: "上传人员ID",
        // eotrdId: "",
        // hcpuVer: "",
        // lpVer: "",
      },
      info: {}
    }
  },
  mounted() {
    this.refreshInfo()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    refreshInfo() {
      newestAnalysisTrainData().then(res => {
        this.info = res.data || {};
        this.info.trainTypeTrans = trainTypes[this.info.trainType] || this.info.trainType;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.current-info {
    color: #fff;
    padding: 5px;

    .item {
        .context {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 24px;
        }
    }
    .label {
        font-size: 12px;
    }

    .value {
        // font-weight: bold;
        text-align: center;
        color: #52BCA9;
        font-size: 14px;
    }
}
</style>

